<template>
	<view class="password_container">
		<up-form :rules="rules" labelPosition="left" :model="queryData" ref="uFormRef">
			<up-form-item labelWidth="70" label="密码" prop="password">
				<up-input password v-model="queryData.password" border="bottom"></up-input>
			</up-form-item>
			<up-form-item labelWidth="70" label="确认密码" prop="passwordRepeat">
				<up-input password v-model="queryData.passwordRepeat" border="bottom"></up-input>
			</up-form-item>
		</up-form>
		<div class="edit_btn" @click="editPassword">
			提交修改
		</div>
		<up-toast ref="uToastRef"></up-toast>
	</view>
</template>

<script setup>
	import {
		rules
	} from "./rules.js"
	import {
		ref,
		onMounted,
		getCurrentInstance
	} from 'vue';
	import {
		apiChangePassWord
	} from "@/api/user.js"
	const userInfo = ref({})
	const uToastRef = ref(null)
	const uFormRef = ref(null)
	const eventChannel = ref(null)
	const queryData = ref({
		password: "",
		passwordRepeat: ""
	})
	const editPassword = () => {
		uFormRef.value.validate().then(async (valid) => {
			if (valid) {
				let {
					password,
					passwordRepeat
				} = queryData.value
				if (password != passwordRepeat) {
					return uToastRef.value.show({
						type: "error",
						title: '两次填写的密码不一样',
						message: "两次填写的密码不一样"
					})
				}
				await apiChangePassWord({
					userName: userInfo.value.userName,
					phone: userInfo.value.phone,
					password: queryData.value.password
				});
				uni.navigateBack()
				uToastRef.value.show({
					type: "success",
					title: '修改成功',
					message: "修改成功"
				})
				eventChannel.value.emit("logoutSuccessful")

			}
		}).catch(() => {
			// 处理验证错误  
			uToastRef.value.show({
				type: "none",
				title: '请填写表单内容',
				message: "请填写表单内容"
			})
		});
	}
	onMounted(async () => {
		const instance = getCurrentInstance().proxy
		eventChannel.value = instance.getOpenerEventChannel();
		let res = await uni.getStorage({
			key: "empleyeeInfo"
		})
		userInfo.value = res.data

	})
</script>

<style scoped lang="scss">
	.password_container {
		width: 100vw;
		height: 100vh;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.edit_btn {
		width: 90vw;
		border-radius: 20rpx;
		position: absolute;
		top: 20%;
		left: 50%;
		transform: translate(-50%, 0);
		height: 80rpx;
		background: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 36rpx;
		color: #fff;
		background-color: #F5B017;
	}
</style>
